<template lang="html">
  <div class="">
    <div class="btn">
      <el-button type="primary" @click="back">返回上级</el-button>
    </div>
    <div class="form">
      <el-form :model="pageData" ref="ruleForm" label-width="120px" class="demo-ruleForm">
        <el-form-item label="门店省份">
          <el-select v-model="pageData.provinceId" placeholder="请选择" filterable @change="getcity">
              <el-option value="">请选择</el-option>
              <el-option
                v-for="item in province"
                :key="item.id"
                :label="item.fullName"
                :value="item.id+''">
              </el-option>
            </el-select>
         </el-form-item>
         <el-form-item label="门店城市">
           <el-select v-model="pageData.cityId" placeholder="请选择" @change="getdistrict">
               <el-option value="">请选择</el-option>
               <el-option
                 v-for="item in city"
                 :key="item.id"
                 :label="item.fullName"
                 :value="item.id+''">
               </el-option>
             </el-select>
          </el-form-item>
          <el-form-item label="门店区域">
            <el-select v-model="pageData.areaId" placeholder="请选择">
                <el-option value="">请选择</el-option>
                <el-option
                  v-for="item in district"
                  :key="item.id"
                  :label="item.fullName"
                  :value="item.id+''">
                </el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="门店地址">
              <el-input v-model="pageData.storeAddress" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="门店名称">
              <el-input v-model="pageData.storeName" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="门店描述">
              <el-input v-model="pageData.storeDesc" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="门店位置(经度)">
              <el-input v-model="pageData.storeLocationLng" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="门店位置(维度)">
              <el-input v-model="pageData.storeLocationLat" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="联系方式(多个以逗号隔开)">
              <el-input v-model="pageData.storeTel" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="开门时间(工作日)">
              <el-input v-model="pageData.storeWorkOpen" placeholder="请输入内容"></el-input>
            <!-- <el-date-picker
             v-model="pageData.storeWorkOpen"
             type="date"
              value-format="yyyy/MM/dd"
             placeholder="选择日期">
           </el-date-picker> -->
          </el-form-item>
          <el-form-item label="开门时间(节假日)">
            <el-input v-model="pageData.storeHolidayOpen" placeholder="请输入内容"></el-input>
            <!-- <el-date-picker
             v-model="pageData.storeHolidayOpen"
             type="date"
             value-format="yyyy/MM/dd"
             placeholder="选择日期">
           </el-date-picker> -->
          </el-form-item>
          <el-form-item label="门店图片">
            <el-upload
             class="upload-demo"
             :auto-upload='false'
             :on-change="upload"
             :file-list="fielList"
             :on-remove="handleRemove"
             action="https://jsonplaceholder.typicode.com/posts/"
             :list-type="String"
             list-type="picture">
             <el-button size="small" type="primary">点击上传</el-button>
           </el-upload>
          </el-form-item>
          <el-form-item class="confirm">
            <el-button type="primary"  v-if="this.$route.query.num == 1" @click="upForm('')">更新</el-button>
             <el-button type="primary" v-else @click="submitForm(null,'post')">提交</el-button>
          </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import Data from './addshopData.js'
import dialogVue from '@/components/dialog.vue'
  import { Base64 } from 'js-base64';
import {
  getReginal,
  addShop,
  findShop,
  compileShop
} from "@/api/product/product";
export default {
  data () {
    return JSON.parse(JSON.stringify(Data))
  },
  mounted () {
    if (this.$route.query.num && JSON.parse(this.$route.query.num) == 1) {
      var level = 1
      getReginal(level).then(res=>{ //省份
        if (res.data.code == 'OK') {
             this.province = res.data.data;
             this.getfindShop();
             // this.district = [];
        }
      })
    }
    var level = 1
    console.log(this.pageData.provinceId);
    getReginal(level).then(res=>{ //省份
      if (res.data.code == 'OK') {
         this.province = res.data.data;
         // this.district = [];
      }
    })
  },
  methods : {
    getfindShop () {//获取门店信息
      var id = JSON.parse(this.$route.query.item).storeId;
      findShop(id).then(res=>{
        if (res.data.data.storePicture) {
          console.log(res);
          JSON.parse(res.data.data.storePicture).map(item=>{
              this.fielList.push({
                name : '',
                url : item
              })
            })
        }
        let datas = JSON.stringify(res.data.data)
        this.pageData = res.data.data;
        this.getcity(JSON.parse(datas).provinceId);
        this.getdistrict(JSON.parse(datas).cityId);
        this.pageData = JSON.parse(datas);
      })
    },
    upload (file,fileList) {//拿到图片的地址
         let reader = new FileReader();
         reader.readAsDataURL(file.raw);
         reader.onload =  () => {
           if (this.$route.query.num && JSON.parse(this.$route.query.num) == 1) {
                this.compileUrl.push({
                  base64Url:reader.result.split(',')[1],
                  url:file.url
                })
           } else {
             this.fielList.push({
               base64Url:reader.result.split(',')[1],
               url:file.url
             })
            }
         }
    },
    getcity (val) {//城市
      var data = {
        level : 2,
        parentId : val
      }
      this.pageData.cityId = '';
      this.pageData.areaId = '';
      getReginal(data).then(res=>{
        if (res.data.code == 'OK') {
           this.city = res.data.data;
           this.district = [];
        }
      })
    },
    getdistrict (val) {//区域
      var data = {
        level :3,
        parentId : val
      }
      this.pageData.areaId = '';
      getReginal(data).then(res=>{
        if (res.data.code == 'OK') {
           this.district = res.data.data;
        }
      })
    },
    handleRemove (file) {
        this.fielList.map((item,idx,arr)=>{//新增
          if (file.url == item.url) {
              arr.splice(idx,1);
          }
        })
        this.compileUrl.map((item,idx,arr)=>{//编辑
          if (file.url == item.url) {
              arr.splice(idx,1);
          }
        })
    },
    submitForm () {
        var data = {
          provinceId : this.pageData.provinceId,
          cityId : this.pageData.cityId,
          areaId : this.pageData.areaId,
          storeAddress : this.pageData.storeAddress,
          storeName : this.pageData.storeName,
          storeDesc : this.pageData.storeDesc,
          storeLocationLng : this.pageData.storeLocationLng,
          storeLocationLat : this.pageData.storeLocationLat,
          storeTel : this.pageData.storeTel,
          storeWorkOpen : this.pageData.storeWorkOpen,
          storeHolidayOpen : this.pageData.storeHolidayOpen,
          base64Imgs : this.fielList.map((item)=>{return item.base64Url})
        }
        addShop(data).then(res=>{
          if (res.data.code =='OK') {
            this.$message.success('新增成功');
            setTimeout(()=>{
              this.$router.push({
                name : 'shop'
              })
            },1000)
          } else {
            this.$message.error(res.data.message);
          }
        })
    },
    upForm () {
      var url = this.fielList.map(item=>{return item.url})
      this.pageData['base64Imgs'] = this.compileUrl.map((item)=>{return item.base64Url})
      this.pageData['storePicture'] = JSON.stringify(url);
      compileShop(this.pageData).then(res=>{
        if (res.data.code =='OK') {
            this.$message.success('编辑成功');
            setTimeout(()=>{
              this.$router.push({
                name : 'shop'
              })
            },1000)
        } else {
          this.$message.error(res.data.message);
        }
      })
    },
    back () {
      this.$router.push({
        name : 'shop'
      })
    },
    changeData (val) {
      this.dialog = val;
    },
  }
}
</script>

<style scoped>
  .btn {
    margin-top: 10px;
  }
  .form {
    margin-top:20px;
    width:100%;
    background: #fff;
  }
  .el-form {
    width: 30%;
    padding: 20px 20px;
  }
  .el-input--medium {
    /* width: 200px !important; */
  }
</style>
